<template>
  <div class="wrap">
    <div class="container">
      <div class="top">
        <el-input
        size="small"
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="bottom">
        <ul>
           <li> <span>热搜：</span></li>
            <li v-for="item in keys" :key="item.name"><a :href="item.url">{{item.name}}</a></li>
          </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeSearch",
  components: {},
  data() {
    return {
      input:'',
      select:'',
      keys:[
        {name:'代理',url:'/'},
        {name:'阿里云代金券',url:'/'},
        {name:'营销型网站',url:'/'},
        {name:'自适应模板',url:'/'},
        {name:'文章/图库',url:'/'},
        {name:'TAG',url:'/'},
        {name:'网页素材',url:'/'},
      ]
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}
.el-select {
  width: 100px;
}
.bottom{
  ul{
    margin:8px 0 0 0;
    display: inline-block;
     display: flex;
  }
  li{
    margin-right: 10px;
  }
  a:hover {
  color: rgb(101, 129, 240);
  }
  a {
    font-size: 12px;
    color: #666;
  }
  span {
    color: rgb(231, 23, 23);
    font-size: 12px;
  }
}

</style>
